﻿<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<style>
*{
  margin:0px;
  padding:0px;
}
.all{
  height:100%;
  background:black;
}
.clearfix:after{
  display:table;clear:both;content:"";
}
.fl{
  float:left;
}
.w25{
  width:25%;
}
.w50{
  width:50%;
}
.top{
  height:30%;
  background:black;
  position:relative;
} 
#d1{
  position:absolute;
  right:0px;
  bottom:0px;
  color:white;
  padding:20px;
  font-size:80px;
}

.all_btns{
  height:70%;
  color:white;
  font-size:30px;
}
.btns{
  height:20%;
}
.btn{
  text-align:center;
  width:80px;
  margin:6px;
  height:80px;
  display:flex;
  justify-content:center;
  align-items:center;
  box-sizing:border-box;
  border-radius:100%;
  background-color:#666;
}
.bg1{
  background-color:orange;
}

.bg2{
  background-color:#ccc;
}
</style>
<div class="all">
  <div class="top">
	<div id="d1">0</div>
  </div>
  <div class="all_btns">
    <div class="btns clearfix">
      <div class="btn fl w25 bg2">AC</div>
      <div class="btn fl w25 bg2">+/-</div>
      <div class="btn fl w25 bg2">%</div>
      <div class="btn fl w25 bg1">÷</div>
    </div>
    <div class="btns clearfix">
     <div class="btn fl w25">7</div>
      <div class="btn fl w25">8</div>
      <div class="btn fl w25">9</div>
      <div class="btn fl w25 bg1">×</div>
    </div>
    <div class="btns clearfix">
      <div class="btn fl w25">4</div>
      <div class="btn fl w25">5</div>
      <div class="btn fl w25">6</div>
      <div class="btn fl w25 bg1">-</div>
    </div>
    <div class="btns clearfix">
      <div class="btn fl w25" onclick="show1()">1</div>
      <div class="btn fl w25">2</div>
      <div class="btn fl w25">3</div>
      <div class="btn fl w25 bg1" onclick="jia()">+</div>
    </div>
    <div class="btns clearfix">
      <div class="btn fl w50" style="width:170px;border-radius:60%;">0</div>
      <div class="btn fl w25">.</div>
      <div class="btn fl w25 bg1" onclick="dengyu()">=</div>
    </div>
  </div>
</div>


<script>
function show1(){
  if(d1.innerHTML =="0"){
    d1.innerHTML = "1";
  }else{
    d1.innerHTML = d1.innerHTML + "1";
  }
}

var num1;
var num2;
var ysf;

function jia(){
  num1 = parseInt(d1.innerHTML);
  d1.innerHTML = "";
  ysf = "+";
}

function dengyu(){
  num2 = parseInt(d1.innerHTML); 
  if(ysf=="+"){
    d1.innerHTML = num1 + num2;
  }else if(ysf=="*"){
    d1.innerHTML = num1 * num2;
  }
}

</script>